// 全局SCSS变量和混入
$primary-color: #1890ff;
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #f5222d;
$text-color: #262626;
$text-color-secondary: #8c8c8c;
$border-color: #d9d9d9;
$background-color: #f5f5f5;
$white: #ffffff;

// 字体大小
$font-size-xs: 14px;
$font-size-sm: 16px;
$font-size-base: 18px;
$font-size-lg: 20px;
$font-size-xl: 24px;
$font-size-xxl: 28px;

// 间距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-xxl: 48px;

// 圆角
$border-radius-sm: 4px;
$border-radius-base: 6px;
$border-radius-lg: 8px;

// 阴影
$box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
$box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
$box-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

// 混入
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin card-style {
  background: $white;
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-sm;
  padding: $spacing-lg;
}

@mixin hover-effect {
  transition: all 0.3s ease;
  cursor: pointer;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: $box-shadow-base;
  }
}
